<template>
    <div>
        <el-card class="borderLeftColor">
            <i class="el-icon-s-management"></i>
            <span>站长推荐</span>
        </el-card>
        
        <el-row :gutter="20" class="rowTopMargin">
            <el-col class="topElCol" v-for="item in netIntroduce" :key="item.id" :span="6">
                <el-tooltip effect="dark" :content="item.value" placement="top" :enterable="false">
                    <a :href="'http://'+item.url" target="_blank">
                        <el-card shadow="hover">
                            <el-row :gutter="10">
                                <el-col :span="6">
                                    <img :src="'https://' +item.imgUrl" alt="">
                                </el-col>
                                <el-col :span="18">
                                    <div class="value">{{item.value}}</div>
                                    <!-- <div>{{item.url}}</div> -->
                                    <div class="decNet">{{item.decNet}}</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </a>
                </el-tooltip>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import netIntroduce from './netIntroduce.js'
export default {
    data(){
        return{
            // 推荐网站信息
            netIntroduce
        }
    },
    created(){},
    methods:{}
}
</script>
<style lang="less" scoped>
    .borderLeftColor{
        border-left: 10px solid #409EFF;
    }
    span{
             margin-left: 15px;
             font-size: 15px;
             font-weight: bold;
        }
        .rowTopMargin{
            margin-top: 20px;
        }
        .topElCol a{ 
            text-decoration: none;
        }
        .topElCol .el-card{
            margin-top: 20px;
            height: 80px;
            img{
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }
        }
        .decNet{
            margin-top: 5px;
            font-size: 10px;
        }
        
</style>
